import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableWithoutFeedback,
    Animated
} from 'react-native';

import ColorUtils from '../Utils/ColorUtils'

export default class Panel extends Component
{
    constructor(props)
    {
        super(props);

        this.icons = {
            'up': require('../img/arrow-up.png'),
            'down': require('../img/arrow-down.png')
        };

        this.state = {
            title: props.title,
            expanded: false,
            animation: new Animated.Value()
        };
    }

    toggle()
    {
        let initialValue = this.state.expanded ? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
            finalValue = this.state.expanded ? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

        this.setState({
            expanded: !this.state.expanded
        });

        this.state.animation.setValue(initialValue);
        Animated.spring(
            this.state.animation,
            {
                toValue: finalValue
            }
        ).start();
    }

    _setMaxHeight(event)
    {
        if (!this.state.maxHeight)
        {
            this.setState({
                maxHeight: event.nativeEvent.layout.height,
            });
        }
    }

    _setMinHeight(event)
    {
        if (!this.state.minHeight)
        {
            this.setState({
                minHeight: event.nativeEvent.layout.height,
                animation: new Animated.Value(event.nativeEvent.layout.height),
            });
        }
    }

    render()
    {
        let icon = this.icons['down'];

        if (this.state.expanded)
        {
            icon = this.icons['up'];
        }

        return (
            <Animated.View style={[styles.container, {height: this.state.animation}]}>
                <View style={styles.titleContainer} onLayout={this._setMinHeight.bind(this)}>
                    <Text style={styles.title}>{this.state.title}</Text>
                    <TouchableWithoutFeedback style={styles.button} onPress={this.toggle.bind(this)} underlayColor="#f1f1f1">
                        <Image style={styles.menuArrowDown} source={icon}/>
                    </TouchableWithoutFeedback>
                </View>
                <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
                    {this.props.children}
                </View>
            </Animated.View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        overflow: 'hidden',
        margin: 4,
        // backgroundColor: ColorUtils.blue
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        padding: 4,
        borderColor: ColorUtils.blue,
    },
    title: {
        flex: 1,
        marginLeft: 8,
        color: ColorUtils.blue,
        fontSize: 12,
    },
    button: {},
    menuArrowDown: {
        width: 25,
        height: 25
    },
    body: {
        padding: 10,
        paddingTop: 0,
        paddingBottom: 0
    }
});

